<template>
  <div id="app">
   
    <footer class="footer">
      <router-link v-for="(v,i) in footer" :key="i" tag="figure" :to="v.path">
        <img :src="v.img">
        <p>{{v.title}}</p>
      </router-link>
    </footer>
    <router-view/>
    
  </div>
</template>

<script>
export default {
  name: 'app',
   data () {
      return {
        footer:[
          {
            "img":"src/assets/img/footer_1.png",
            "title":"外卖",
            path:"/index"
          },
          {
            "img":"src/assets/img/footer_3.png",
            "title":"发现",
            path:"/find"
          },
          {
            "img":"src/assets/img/footer_2.png",
            "title":"订单",
            path:"/Order"
          },
          {
            "img":"src/assets/img/footer_4.png",
            "title":"我的",
            path:"/My"
          }
        ]
        }
      }
   }
</script>

<style scoped lang="less">
.px2rem(@name, @px) {@{name}: @px / 75 * 1rem;}

.footer{
  width: 100%;
  .px2rem(height, 100);
   box-shadow: 0px 9px 4px 10px #cccc;
  background: #fafafa;
  display: flex;
  align-items: center;
  position: fixed;
  left: 0;
  bottom: 0;
  color: #818181;
 
  figure{
    width: 25%;
    text-align: center;
    img{
      .px2rem(height,60);
      .px2rem(width, 60);
    }
    p{
      .px2rem(font-size, 18);
    }
  }
}
.router-link-exact-active, .router-link-active{
  color: #0390ff;
}
</style>
